import React from 'react';
import { Row, Spin, Radio, Col, Card, DatePicker } from 'antd';
import moment from 'moment';
import { connect } from 'umi';
import TreeSelectPro from '@/components/TreeSelectPro/TreeSelectPro';
import useTreeSelectData from '@/hooks/useTreeSelectData';
import {
    TopCard,
    StaffCard,
    TaskPie,
    TaskBar,
    QualityBar,
    JobPie,
    Rank,
    DepartmentChart
} from '../components';
import { useEmployeeOverview } from '../hooks';
import { formatDate, limitDate } from '../utils';
import styles from './index.less';

const Overview = ({ location = {} }) => {
    const { query = {} } = location;
    const [params, setParams] = React.useState({
        companyId: query.companyId || 101,
        reportType: query.reportType || '1',
        startDate: query.startDate || formatDate('1', moment()).startDate,
        endDate: query.endDate || formatDate('1', moment()).endDate
    });

    const [spinning, overviewData] = useEmployeeOverview(params);
    const [date, setDate] = React.useState(moment(query.startDate) || moment());
    const [workType, setWorkType] = React.useState('1');
    const [treeData, treeLoading] = useTreeSelectData('company')

    const handleSelectCompany = React.useCallback(
        companyId => {
            setParams({ ...params, companyId });
        },
        [params]
    );

    const handleSelectDateType = React.useCallback(
        e => {
            const { value } = e.target;
            setParams({ ...params, reportType: value, ...formatDate(value, date) });
        },
        [params]
    );

    const handleWorkType = React.useCallback(e => {
        setWorkType(e.target.value);
    }, []);

    const handleDate = React.useCallback(
        value => {
            setDate(value);
            setParams({ ...params, ...formatDate(params.reportType, value) });
        },
        [params]
    );

    const {
        evalPeopleNum = 0, // 考核人数
        totalTaskNum = 0, // 总任务数
        doneTaskNum = 0, // 已完成任务
        planPerCapitaStandardWorkloadNum: planWorkloadNum = 0, // 计划人均工作量
        actualPerCapitaWorkloadNum = 0, // 实际人均工作量
        rankEmployeeNumVOList = [],
        departmentTaskDoneList = [],
        evalEmployeePostVOList = [],
        planWorkloadExcessPeopleNum = 0,
        planWorkloadLackPeopleNum = 0,
        planWorkloadNormalPeopleNum = 0,
        actualWorkloadNormalPeopleNum = 0,
        actualWorkloadLackPeopleNum = 0,
        actualWorkloadExcessPeopleNum = 0,
        perCapitaDoneRateStr = 0,
        perCapitaOverdueRateStr = 0,
        evalScore = 0,
        rankName = '',
        planPerCapitaWorkloadDepartmentSortList = [],
        firstLevelDepartmentEmployeeDistributionVOList = [],
        secondLevelDepartmentEmployeeDistributionVOList = []
    } = overviewData;

    const rankData = React.useMemo(
        () =>
            planPerCapitaWorkloadDepartmentSortList.map(
                ({ departmentName, planPerCapitaStandardWorkloadNum, departmentId, firstLevelDepartmentId }) => ({
                    departmentId,
                    firstLevelDepartmentId,
                    title: departmentName,
                    num: planPerCapitaStandardWorkloadNum
                })
            ),
        [overviewData]
    );

    const topCardData = [
        {
            value: evalPeopleNum,
            desc: '考核人数',
            unit: '人',
            link: { pathname: '/stat/workStat/workOverview/work/employee', query: { ...params, evalFlag: 1 } }
        },
        {
            value: `${totalTaskNum}/${doneTaskNum}`,
            desc: '总任务/已完成',
            link: { pathname: '/stat/workStat/workOverview/work/task', query: params }
        },
        { value: planWorkloadNum, desc: '计划人均工作量', unit: '小时' },
        { value: actualPerCapitaWorkloadNum, desc: '实际人均工作量', unit: '小时' }
    ];

    const departmentData = React.useMemo(
        () => [firstLevelDepartmentEmployeeDistributionVOList, secondLevelDepartmentEmployeeDistributionVOList],
        [overviewData]
    );

    const workData1 = [
        { name: '工作量不足', num: planWorkloadLackPeopleNum },
        { name: '工作量正常', num: planWorkloadNormalPeopleNum },
        { name: '工作量超额', num: planWorkloadExcessPeopleNum }
    ];

    const workData2 = [
        { name: '工作量不足', num: actualWorkloadLackPeopleNum },
        { name: '工作量正常', num: actualWorkloadNormalPeopleNum },
        { name: '工作量超额', num: actualWorkloadExcessPeopleNum }
    ];

    const DateComponent = params.reportType === '1' ? DatePicker.WeekPicker : DatePicker.MonthPicker;

    return (
        <Row className={styles.wrap} style={{ overflowX: 'auto' }}>
            <Row style={{ minWidth: 1200 }}>
                <Spin spinning={spinning}>
                    <Card>
                        <Row className={styles.topBtn} type="flex">
                            <TreeSelectPro
                                allowClear
                                showSearch
                                treeDefaultExpandAll
                                loading={treeLoading}
                                treeData={treeData}
                                value={params.companyId}
                                onChange={handleSelectCompany}
                                style={{ width: 160, marginRight: 16 }}
                            />
                            <Radio.Group
                                value={params.reportType}
                                onChange={handleSelectDateType}
                                style={{ marginRight: 8 }}
                            >
                                <Radio.Button value="1">周</Radio.Button>
                                <Radio.Button value="2">月</Radio.Button>
                            </Radio.Group>
                            <DateComponent
                                disabledDate={current => limitDate(current, params.reportType)}
                                value={date}
                                onChange={handleDate}
                            />
                        </Row>
                    </Card>

                    <Row className={styles.block}>
                        <TopCard data={topCardData} query={params} />
                    </Row>

                    <Row className={styles.block} gutter={12}>
                        <Col span={15}>
                            <Card title="职能部门考核人员分布" style={{ height: 480 }}>
                                <DepartmentChart data={departmentData} query={params} />
                            </Card>
                        </Col>
                        <Col span={9}>
                            <Card title="计划人均工作量排名" style={{ height: 480 }}>
                                <Rank data={rankData} query={params} />
                            </Card>
                        </Col>
                    </Row>

                    <Row className={styles.block}>
                        <StaffCard data={overviewData} query={params} />
                    </Row>

                    <Row className={styles.block} gutter={12}>
                        <Col span={12}>
                            <Card
                                title="员工工作量分析"
                                style={{ height: 480 }}
                                extra={
                                    <Radio.Group value={workType} onChange={handleWorkType}>
                                        <Radio.Button value="1">计划工作量</Radio.Button>
                                        <Radio.Button value="2">实际工作量分布</Radio.Button>
                                    </Radio.Group>
                                }
                            >
                                <Row gutter={16} style={{ marginBottom: 16 }}>
                                    <Col span={24} style={{ color: 'rgba(38, 38, 38, 0.45)' }}>
                                        人均工作量：
                                        <strong style={{ fontSize: 24, color: '#333' }}>
                                            {workType === '1'
                                                ? Number(planWorkloadNum).toFixed(0)
                                                : Number(actualPerCapitaWorkloadNum).toFixed(0)}
                                        </strong>{' '}
                                        小时
                                    </Col>
                                </Row>
                                <TaskPie data={workType === '1' ? workData1 : workData2} query={params} />
                            </Card>
                        </Col>
                        <Col span={12}>
                            <Card title="任务完成率分布" style={{ height: 480 }}>
                                <Row gutter={16} style={{ marginBottom: 16 }}>
                                    <Col span={12} style={{ color: 'rgba(38, 38, 38, 0.45)' }}>
                                        人均任务数完成率：
                                        <strong style={{ color: '#333', fontSize: 24 }}>{perCapitaDoneRateStr}</strong>
                                    </Col>
                                    <Col span={12} style={{ color: 'rgba(38, 38, 38, 0.45)' }}>
                                        人均任务数逾期率：
                                        <strong style={{ color: '#333', fontSize: 24 }}>
                                            {perCapitaOverdueRateStr}
                                        </strong>
                                    </Col>
                                </Row>
                                <TaskBar data={departmentTaskDoneList} />
                            </Card>
                        </Col>
                    </Row>
                    <Row className={styles.block} gutter={12}>
                        <Col span={12}>
                            <Card title="员工工作质量分析" style={{ height: 450 }}>
                                <Row gutter={16}>
                                    <Col span={24} style={{ color: 'rgba(38, 38, 38, 0.45)' }}>
                                        人均得分：<strong style={{ fontSize: 24, color: '#333' }}>{evalScore}</strong>{' '}
                                        分 <span className={styles.score}>{rankName}</span>
                                    </Col>
                                </Row>
                                <QualityBar data={rankEmployeeNumVOList} query={params} />
                            </Card>
                        </Col>
                        <Col span={12}>
                            <Card title="考核人员职位分布" style={{ height: 450 }}>
                                <div className={styles.jobWrap}>
                                    <span className={styles.jobNum}>{overviewData.evalPeopleNum}</span>
                                    <span className={styles.jobText}>考核人数</span>
                                </div>
                                <JobPie data={evalEmployeePostVOList} query={params} />
                            </Card>
                        </Col>
                    </Row>
                </Spin>
            </Row>
        </Row>
    );
};

export default connect(({ user }) => ({ user: user.currentUser }))(Overview);
